<template>
  <!-- 顶部 -->
  <div>
    <van-nav-bar title="付款结果" left-text="" left-arrow @click-left="this.$router.push('/MyOrders')" />
  </div>
  <!-- 成功 -->
  <div v-if="this.$route.query.data == 'success'">
    <div class="res">付款成功</div>
    <div class="btn">
      <van-button class="btn1" @click="goRes">查看订单</van-button>
      <van-button class="btn1" @click="goHome">继续逛</van-button>
    </div>
  </div>
  <!-- 失败 -->
  <div v-else-if="this.$route.query.data == 'fail'">
    <div class="res2">付款失败</div>
    <div class="prompt">
      请在 <span> 半小时 </span>内完成付款<br />
      否则订单将会被系统取消
    </div>
    <div class="btn">
      <van-button class="btn1" @click="goRes">查看订单</van-button>
      <van-button class="btn1" @click="pay">重新付款</van-button>
    </div>
  </div>
</template>

<script>
import { service } from "../api/config";
export default {
  name: "paymentresult",
  methods: {
    pay() {
      this.$router.push({
        path: "paymentresult",
        query: { data: "success" },
      });
    },
    goRes() {
      this.$router.push("/MyOrders");
    },
    goHome() {
      this.$router.push("/");
    },
  },
  mounted() {
    if (this.$route.query.data == 'success' && sessionStorage.getItem("oid") != undefined) {
      service.post("/wx/order/pay", {
        orderId: sessionStorage.getItem("oid")
      })
    }
  }
};
</script>

<style scoped>
.res {
  width: 100%;
  text-align: center;
  font-size: 20rem;
  color: rgb(99, 174, 94);
  margin-top: 50rem;
}

.res2 {
  color: rgb(178, 88, 90);
  width: 100%;
  text-align: center;
  font-size: 20rem;
  margin-top: 50rem;
}

.btn {
  text-align: center;
  font-size: 20rem;
  color: rgb(99, 174, 94);
  margin-top: 50rem;
}

.btn1 {
  margin-right: 20rem;
  width: 100rem;
}

.prompt {
  text-align: center;
  font-size: 12rem;
  margin-top: 50rem;
}

.prompt span {
  font-size: 20rem;
}
</style>